<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_商品列表练习</title>
</head>
<body>
<table border="1">
<tr>
  <th>商品名称</th>
  <th>商品价格</th>
  <th>商品库存</th>
</tr>

</table>


<script>
    //定义数组用来模拟从后端服务器请求回来的数据
   const arr=
           [
           {title:"苹果17",price:6999,num:100},
           {title:"苹果16",price:4999,num:200},
           {title:"苹果15",price:3999,num:300},
           {title:"威图手机",price:2476999,num:400},
           {title:"苹果17proMAX",price:16999,num:500}
           ];
    //获取用来展示数据的table元素
   let tableE=document.querySelector("table");
   for (let i = 0;i<arr.length;i++){
       //每多一行,就需要创建一个tr与3个td元素
         let trE=document.createElement("tr")//创建tr元素
         let titleTd=document.createElement("td");//创建td元素
         let priceTd=document.createElement("td");//创建td元素
         let numTd=document.createElement("td");//创建td元素
       //将本轮循环到的商品数据放入td元素中
         titleTd.innerHTML=arr[i].title;//td给元素赋值
         priceTd.innerHTML=arr[i].price;//td给元素赋值
         numTd.innerHTML=arr[i].num;//td给元素赋值
       //将准备好的3个td元素添加到tr中
         trE.append(titleTd,priceTd,numTd)//给tr添加td元素
       //获取表格元素,并将准备好的tr元素添加到表格中
         tableE.append(trE);//给table添加tr元素
   }


</script>
</body>
</html>